/*!
 _________
|   🤹‍♀️   |\
| ~~~~~~~ |_\
|  button |
| ~~~~~~~ |
| ~~~~~~~ |
|_________|
*/
@import './_prefix.less';
button {
    line-height: 2.6;
    font-size: 24rpx;
    margin: 0;
}
.@{prefix}-btn {
    position: relative;
    padding: 0 30rpx;
    border-radius: 6rpx;
    text-align: center;
    text-decoration: none;
    margin: 0 auto;
    &::after {
        display: none;
    }
    &.button-hover {
        // transform: translate(1rpx, 1rpx);
        position: relative;
        &::before {
            content: '';
            position: absolute;
            border-radius: 100%;
            background-color: #fff;
            left: 0;
            top: 0;
            opacity: .618;
            transform: scale(.3);
            width: 90%;
            height: 100%;
            animation: ripple .5s ease-out;
            animation-fill-mode: forwards;
            @keyframes ripple {
                from {
                    transform: scale(2.5);
                    opacity: .3;
                }
                to {
                    transform: scale(.1);
                    opacity: 0;
                }
            }
        }
    }
}
.@{prefix}-btn[class*="line"] {
    background-color: transparent;
}
.@{prefix}-btn[class*="line"]::after {
    content: ' ';
    display: block;
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1rpx solid currentColor;
    transform: scale(0.5);
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: 12rpx;
    z-index: 1;
    pointer-events: none;
}

.icon-btn {
    line-height: 2.5;
    text {
        vertical-align: middle;
        &:last-child {
            margin-left: 12rpx;
        }
    }
}
.tag-btn {
    &.button-hover {
        background: none;
    }
    &.left > .left {
        border-radius: 12rpx 0 0 12rpx;
    }
    &.right > .left {
        border-radius: 0 12rpx 12rpx 0;
    }
    &.left,
    &.right {
        & > .@{prefix}-btn {
            padding: 16rpx 14rpx 14rpx 20rpx;
            &.arrow::before {
                position: absolute;
                content: ' ';
                background: #fff;
                z-index: 2;
                width: 12rpx;
                height: 12rpx;
                border-width: 0 0 1rpx 1rpx;
                border-color: transparent;
                border-style: solid;
                transform: translateX(-50%) translateY(-50%) rotate(45deg);
                bottom: auto;
                left: auto;
                top: 50%;
                right: -6rpx;
                margin-top: -1rpx;
            }
        }
        &.line > .@{prefix}-btn {
            &.arrow::before {
                background: white;
                border-color: currentColor;
                z-index: 2;
                width: 12rpx;
                height: 12rpx;
                border-width: 0 0 1rpx 1rpx;
                transform: translateX(-50%) translateY(-50%) rotate(45deg);
                bottom: auto;
                left: auto;
                top: 50%;
                right: -6rpx;
                margin-top: -1rpx;
            }
        }
    }
    &.left {
        &.basic > .@{prefix}-btn {
            margin-left: -1rpx;
            &.arrow::before {
                border-width: 0 0 1rpx 1rpx;
                right: auto;
                left: 4rpx;
            }
        }
        &.line > .@{prefix}-btn {
            &:last-child {
                left: -1rpx;
                &::after {
                    border-radius: 0 12rpx 12rpx 0;
                }
                &::before {
                    right: auto;
                    left: 0;
                }
            }
        }
        & > .left::after {
            border-radius: 12rpx 0 0 12rpx;
        }
    }
    &.right {
        &.basic > .@{prefix}-btn {
            margin-right: -4rpx;
            &.arrow::before {
                border-width: 0 0 1rpx 1rpx;
                left: auto;
                right: -6rpx;
            }
        }
        &.line > .@{prefix}-btn {
            &:last-child {
                right: -1rpx;
                &::after {
                    border-radius: 12rpx 0 0 12rpx;
                }
                &::before {
                    left: auto;
                    right: -11rpx;
                }
            }
        }
        & > .right::after {
            border-radius: 0 12rpx 12rpx 0;
        }
    }
}
.buttons {
    .or {
        position: relative;
        width: .3em;
        height: 72rpx;
        z-index: 3;
        background-color: #fff;
        &::before {
            position: absolute;
            text-align: center;
            border-radius: 500rem;
            content: 'or';
            top: 50%;
            left: 50%;
            background-color: #fff;
            text-shadow: none;
            margin-top: -.9em;
            margin-left: -.9em;
            width: 1.8em;
            height: 1.8em;
            line-height: 1.8em;
            color: rgba(0, 0, 0, .4);
            font-style: normal;
            font-weight: 700;
            -webkit-box-shadow: 0 0 0 2rpx transparent inset;
            box-shadow: 0 0 0 2rpx transparent inset;
        }
        &[data-text]::before {
            content: attr(data-text);
        }
    }
    &.max {
        .@{prefix}-btn {
            width: 48%
        }
    }
}